import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Label

Describes a form field with a label, description, and error message (if any). This widget is usually used for custom
form fields. All form fields in Forui come with this widget wrapped.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.label/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='label' variant='horizontal' query={{}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FLabel(
        axis: Axis.horizontal,
        label: const Text('Accept terms and conditions'),
        description: const Text('You agree to our terms and conditions.'),
        child: const DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(5)),
            color: Colors.grey,
          ),
          child: SizedBox(width: 16, height: 16),
        ),
    );
    ```
  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create label
```

## Usage

### `FLabel(...)`

```dart copy
FLabel(
  style: FLabelStyle(...),
  axis: Axis.horizontal,
  label: const Text('Accept terms and conditions'),
  description: const Text('You agree to our terms and conditions.'),
  error: const Text('Please accept the terms and conditions.'),
  states: { WidgetState.error },
  child: const Placeholder(),
);
```

## Examples

### Vertical

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='label' variant='vertical' query={{}}/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart {2} copy
        FLabel(
            axis: Axis.vertical,
            label: const Text('Email'),
            description: const Text('Enter your email address.'),
            child: const DecoratedBox(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(5)),
                color: Colors.grey,
              ),
              child: SizedBox(width: 250, height: 30),
            ),
        );
        ```
    </Tabs.Tab>
</Tabs>

### Disabled

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='label' variant='horizontal' query={{ state: 'disabled' }}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {5} copy
    FLabel(
        axis: Axis.horizontal,
        label: const Text('Accept terms and conditions'),
        description: const Text('You agree to our terms and conditions.'),
        states: { WidgetState.disabled },
        child: const DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(5)),
            color: Colors.grey,
          ),
          child: SizedBox(width: 16, height: 16),
        ),
    );
    ```
  </Tabs.Tab>
</Tabs>

### Error

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='label' variant='horizontal' query={{ state: 'error' }}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {6} copy
    FLabel(
        axis: Axis.horizontal,
        label: const Text('Accept terms and conditions'),
        description: const Text('You agree to our terms and conditions.'),
        error: const Text('Please accept the terms.'),
        states: { WidgetState.error },
        child: const DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(5)),
            color: Colors.grey,
          ),
          child: SizedBox(width: 16, height: 16),
        ),
    );
    ```
  </Tabs.Tab>
</Tabs>
